/*
	参考：https://juejin.cn/post/7155300505776816158?searchId=202408270852049449D64D6C7722C7BF53
*/


/* 
	@charset：指定样式表中使用的字符编码。它必须是样式表中的第一个元素，而前面不得有任何字符。
	多个 @charset @规则被声明，只有第一个会被使用。
*/
@charset "UTF-8";



/*
	@import：用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则，@charset 规则除外
	使用 @import 影响页面性能的地方主要体现在两个方面：
		影响浏览器的并行下载
		优先级问题，样式互相覆盖
		导致页面闪烁
*/



/*
	@namespace 是用来定义使用在 CSS 样式表中的 XML 命名空间的 @规则。定义的命名空间可以把通配、元素和属性选择器限制在指定命名空间里的元素。
	任何 @namespace 规则都必须在所有的 @charset 和 @import规则之后，并且在样式表中，位于其他任何样式声明之前。
*/



/*
	@keyframes 动画
*/
@keyframes typing {
	from {
		width: 0;
	}
}
@keyframes blink-caret {
	50% {
		border-color: transparent;
	}
}
h1.keyframes_h1 {
	font: bold 200% Consolas, Monaco, monospace;
	border-right: .1em solid;
	width: 16.5em; /* fallback */
	width: 20ch; /* # of chars */
	margin: 2em 1em;
	white-space: nowrap;
	overflow: hidden;
	animation: typing 20s steps(20, end), /* # of steps = # of chars */
	           blink-caret .5s step-end infinite alternate;
}


/*
	@media：如果满足媒介查询的条件则条件规则组里的规则生效
*/
.media_query_div {
	width: 100%;
	height: 50px;
	background-color: red;
	color: yellow;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
/*视口的宽度为 800 像素或更宽*/
@media screen and (min-width: 800px) {
	.media_query_div {
		background-color: yellow;
		color: darkred;
	}
}
/*视口的宽度为 1200 像素或更宽*/
@media screen and (min-width: 1200px) {
	.media_query_div {
		background-color: purple;
		color: green;
	}
}

/* 当宽度介于 600px 和 900px 之间或大于 1100px 时 - 改变 <div> 的外观 */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

/*方向处于横屏模式，则使用浅蓝色背景色*/
.orientation_div {
	width: 388px;
	height: 66px;
	background-color: purple;
}
@media only screen and (orientation: landscape) {
  .orientation_div {
    background-color: lightblue;
  }
}

/*适配明暗主题*/
.color_theme {
	width: 380px;
	height: 50px;
	background-color: white;
	color: red;
}
@media (prefers-color-scheme: dark) {
    .color_theme {
        background-color: black;
        color: darkred;
    }
}



/*
	@font-face规则允许加载并使用自定义字体
*/
@font-face {
    font-family: "Bitstream Vera Serif Bold";
    src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
}
.custom_font_div {
	font-size: 20px;
	margin: 10px;
	font-family: "Bitstream Vera Serif Bold";
	color: blueviolet;
}



/* 
	@supports 通过 CSS 语法来实现特性检测,语法：
	@supports <supports_condition> {
    	//specific rules
	}
	@supports not -- 非
	@supports and -- 与
	@supports or -- 或
*/
.supports_div {
	text-align: center;
	background-color: yellow;
	color: darkred;
	width: 100%;
	height: 44px;
    position: fixed;
}

@supports (position:sticky) {
    .supports_div {
        position:sticky;
    }
}



/*
	@counter-style：是一个 CSS at-rule，它让开发者可以自定义 counter 的样式。
	一个 @counter-style 规则定义了如何把一个计数器的值转化为字符串表示。
*/




/*
	@property CSS at-rule 是 CSS Houdini API 的一部分, 
	它允许开发者显式地定义他们的 CSS 自定义属性，允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。
	cs中：
	<style>
	@property --property-name {
  		syntax: '<color>';
  		inherits: false;
  		initial-value: #fff;
	}
	p {
    	color: var(--property-name);
	}
	</style>
	js中：
	<script>
	CSS.registerProperty({
  	name: "--property-name",
  	syntax: "<color>",
  	inherits: false,
  	initialValue: "#c0ffee"
	});
	</script>

*/
:root {
    --colorA: #fff;
    --colorB: #000;
}
.property_div {
	width: 168px;
	height: 168px;
	margin-bottom: 10px;
	color: white;
}
@property --houdini-colorA {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}
@property --houdini-colorB {
  syntax: '<color>';
  inherits: false;
  initial-value: #000;
}
.property {
    background: linear-gradient(45deg, var(--houdini-colorA), var(--houdini-colorB));
    transition: 1s --houdini-colorA, 1s --houdini-colorB;
    
    &:hover {
        --houdini-colorA: yellowgreen;
        --houdini-colorB: deeppink;
    }
}
/*虽然设定了 1s 的过渡动画 transition: 1s background，但是很可惜，CSS 是不支持背景渐变色的直接过渡变化的，我们得到的只是两帧之间的直接变化。*/
.p_d_1 {
	background: linear-gradient(45deg, var(--colorA), var(--colorB));
	transition: 1s background;
    
    &:hover {
        --colorA: yellowgreen;
        --colorB: deeppink;
    }
}
/*使用了 @property 语法，定义了两个 CSS Houdini 自定义变量 --houdini-colorA 和 --houdini-colorB，在 hover  变化的时候，改变这两个颜色。
需要关注的是，我们设定的过渡语句 transition: 1s --houdini-colorA, 1s --houdini-colorB，在这里，我们是针对 CSS Houdini 自定义变量设定过渡，而不是针对 background 设定过渡动画*/
.p_d_2 {
	background: linear-gradient(45deg, var(--houdini-colorA), var(--houdini-colorB));
    transition: 1s --houdini-colorA, 1s --houdini-colorB;
    
    &:hover {
        --houdini-colorA: yellowgreen;
        --houdini-colorB: deeppink;
    }
}



/*
	CSS @规则 中的@layer声明了一个 级联层， 同一层内的规则将级联在一起， 这给予了开发者对层叠机制的更多控制。
*/



/*
	容器查询 @container
	容器查询@container类似于媒体查询@media，区别在于查询所依据的对象不同。媒体查询依据的是浏览器的视窗大小，容器查询依据的是元素的父元素或者祖先元素的大小。
*/
.container_wrap {
    width: 500px;
    resize: horizontal;
    overflow: auto;
    border: 1px solid black;
}
.g-container {
    display: flex;
    flex-wrap: nowrap;
}
.g-container .child {
	background-color: deeppink;
	color: white;
	font-size: 20px;
}
.container_wrap {
    /* CSS CONTAINER */
    container-name: container_wrap;
    container-type: inline-size;
}
@container container_wrap (max-width: 400px) {
    .g-container {
        flex-wrap: wrap;
        flex-direction: column;
    }
}